<template>
  <section class="description">
	<PageBanner
		:title="banner.title"
		:introduce="banner.description"
		:banner-bg="banner.img"/>
	<div class="wrapper wrapper-fixed destination-list-box">
		<ul class="destination-list">
			<li class="item" v-for="item in destinations">
				<nuxt-link :to="/destination/+item.id" class="item-img img-link zoom-box"><img :src="item.thumbnail" alt=""></nuxt-link>
				<div class="text-area">
					<div class="text-area-inner">
						<h3 class="title"><nuxt-link :to="/destination/+item.id">{{item.title}}</nuxt-link></h3>
						<div class="describe">{{item.excerpt}}</div>
						<div class="text-red tags" v-html="item.keywords"></div>
						<p class="text-right link-box">
							<nuxt-link :to="/destination/+item.id" class="btn-icon-o"><i class="fa fa-angle-right"></i></nuxt-link>
						</p>
					</div>
				</div>
			</li>
		</ul>
	</div>
  </section>
</template>

<script>
import axios from 'axios'
import PageBanner from '~/components/PageBanner.vue'
export default {
  asyncData ({ params, error }) {
    return axios.get(`http://hurtigruten.cn/api/mag.destination.list.json`)
      .then((res) => {
        return {
          banner: res.data.destination_banner,
          destinations: res.data.destinations
        }
      })
      .catch((e) => {
        error({ statusCode: 404, message: 'Post not found' })
      })
  },
  head () {
    return {
      title: '游轮探险目的地_热门探险目的地_游轮探险景点_海达路德游轮探险',
      meta: [
        { hid: 'keywords', name: 'keywords', content: '海达路德游轮，海达路德极地游轮，极地探险，探险游轮，游轮旅游' },
        { hid: 'description', name: 'description', content: '海达路德经过125年的历史沉淀，成为全球游轮探险旅行领军者，与海达路德同行没有观光客，只有探险家。海达路德以打造亲身体验独一无二的海上航行为愿景，是海达路德的品牌精髓，这些都源自海达路德125年来历史悠久的遗传基因。' }
      ]
    }
  },
  components: {
    PageBanner
  }
}
</script>

<style lang="less">
@import 'assets/css/destination.css';
</style>
